<template>
  <div style="height: 500px;">
    <div class="leftPanel">
      <el-row :gutter="10">
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerInput">单行文本</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerInputNumber">数字输入框</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerRadio">单选框</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerCheckbox">多选框</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerSelect">下拉框</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerSwitch">开关</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerCascader">多级联动</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerDatePicker">日期选择器</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerTimePicker">时间选择器</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerColorPicker">颜色选择框</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerUpload">上传</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerRate">评分</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerSlider">滑块</el-button>
        </el-col>
        <el-col :span="11">
          <el-button :size="size" :type="type" @click="makerTree">树形组件</el-button>
        </el-col>
      </el-row>
        <el-button :size="size" :type="type"  @click="makerTable">表格</el-button>
        <el-button :size="size" :type="type"  @click="makerComponent">自定义组件</el-button>
        <el-button :size="size" :type="type"  @click="makerButton">按钮</el-button>
        <el-button :size="size" :type="type"  @click="makerChart">图表</el-button>
    </div>
    <div class="midPanel">
      <div style="margin-bottom: 1%">
        <el-button @click="save">保存</el-button>
      </div>


      <form-create v-model="fApi" :rule="rule" @select-focus="selectFocus" @table-handle-click="tableHandleClick"
                   :option="option"></form-create>

      <el-dialog title="表单名" :visible.sync="formNameVisible" width="30%">
        <el-form ref="form" label-width="80px">
          <el-form-item label="表单名">
            <el-input v-model="formName" placeholder="请输入所设计表单的模块名"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" :disabled="this.formName === '' || this.formName === null" @click="sure">确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
    <div class="rightPanel">
      <vue-json-editor v-model="rule" @json-change="onJsonChange" height="400px"></vue-json-editor>
    </div>
  </div>
</template>

<script>
  import vueJsonEditor from 'vue-json-editor'
  import {generatorApi} from "../../http/modules/generator";
  import Vue from "vue";
  import customComponent from "./template/customComponent";

  export default {
    name: "dynamicForm",
    components: {
      vueJsonEditor
    },

    data() {
      return {
        size: 'medium',
        type: 'text',
        field: '',
        title: '',
        option: {
          row: {
            gutter: 10
          },
          form: {
            labelWidth: '84px'
          },
          submitBtn: {
            show: false
          },
        },

        formNameVisible: false,
        //实例对象
        fApi: {},
        formName: '', // 表单名
        //表单生成规则
        rule: [],
        json: {
          msg: 'demo of jsoneditor'
        }

      }
    },

    methods: {
      makerInput() { // input 输入框
        let inputJson = {
          type: 'input',
          field: 'input',
          title: '单行文本'
        }
        this.rule.push(inputJson)
      },
      makerInputNumber() { // InputNumber 数字输入框
        let inputNumberJson = {
          type: "InputNumber",
          field: "inputNumber",
          title: "数字输入框"
        }
        this.rule.push(inputNumberJson)
      },
      makerRadio() { // Radio 单选框
        let radioJson = {
          type:"radio",
          title:"单选框",
          field:"radio",
          value:"0",
          options:[
            {value:"0",label:"关",disabled:false},
            {value:"1",label:"开",disabled:false},
          ],
        }
        this.rule.push(radioJson)
      },
      makerCheckbox() { // Checkbox 多选框
        let checkboxJson = {
          type:"checkbox",
          title:"多选框",
          field:"checkbox",
          value:["1","2","3"],
          options:[
            {value:"1",label:"好用",disabled:false},
            {value:"2",label:"方便",disabled:false},
            {value:"3",label:"实用",disabled:false},
            {value:"4",label:"有效",disabled:false},
          ]
        }
        this.rule.push(checkboxJson)
      },
      makerSelect() { // Select 下拉选择框
        let selectJson = {
          type: "select",
          field: "select",
          title: "下拉选择框",
          value: [],
          options: [],
          props: {
            multiple: true,
            loading: true,
          },
          emit: ['focus']
        }
        this.rule.push(selectJson)
      },
      makerSwitch() {
        let switchJson = { // Switch 开关
          type:"switch",
          title:"开关",
          field:"switch",
          value:"1",
          props: {
            activeValue:"1",
            inactiveValue:"0",
          },
        }
        this.rule.push(switchJson)
      },
      makerCascader() { // Cascader 多级联动
        let cascaderJson = {
          type:"cascader",
          title:"所在区域",
          field:"address",
          value:['陕西省','西安市','新城区'],
          props:{
            options:window.province || [],
          }
        }
        this.rule.push(cascaderJson)
      },
      makerDatePicker() { // DatePicker 日期选择器
        let datePickerJson = {
          type: "DatePicker",
          field: "datePicker",
          title: "日期",
          value: ['2018-02-20', new Date()],
          props: {
            "type": "daterange",
            "format": "yyyy-MM-dd",
            "placeholder":"请选择活动日期",
          }
        }
        this.rule.push(datePickerJson)
      },
      makerTimePicker() { // TimePicker 时间选择器
        let timePickerJson = {
          type: "TimePicker",
          field: "timePicker",
          title: "时间",
          value: [],
          props: {
            isRange:true
          },
        }
        this.rule.push(timePickerJson)
      },
      makerColorPicker() { // ColorPicker 颜色选择框
        let colorPicker = {
          type: "ColorPicker",
          field: "color",
          title: "颜色",
          value: '#ff7271',
        }
        this.rule.push(colorPicker)
      },
      makerUpload() {
        let uploadJson = { // Upload 上传
          type: "upload",
          field: "upload",
          title: "轮播图",
          value: [
            'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg',
            'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
          ],
          props: {
            "type":"select",
            "uploadType":"image",
            "action": "/upload.php",
            "name":"pic",
            "multiple": true,
            "accept":"image\/*",
            "limit": 2,
            "onSuccess":function (res, file) {
              file.url = res.data.filePath;
            }
          },
        }
        this.rule.push(uploadJson)
      },
      makerRate() { // Rate 评分
        let rateJson = {
          type:"rate",
          field:"rate",
          title:"评分",
          value:3.5,
          props:{
            max: 10,
          },
        }
        this.rule.push(rateJson)
      },
      makerSlider() { // Slider 滑块
        let sliderJson = {
          type:"slider",
          field:"slider",
          title:"滑块",
          value:[0,52],
          props:{
            min: 0,
            max: 100,
            range: true,
          }
        }
        this.rule.push(sliderJson)
      },
      makerTree() {

      },
      makerFrame() {

      },
      makerTable() {
        let tableJson = {
          type: 'ddd-table',
          title: '',
          field: 'table',
          value: '',
          props: {
            columns: [
              {
                prop: 'column1',
                label: '列1'
              },
              {
                prop: 'column2',
                label: '列2'
              }
            ],
            tableData: [{column1: '列1', column2: '列2'}],
            tableOperation: {
              operation: [
                {type: 'view', name: '查看', icon: 'el-icon-view'},
                {type: 'editor', name: '编辑', icon: 'el-icon-edit'},
                {type: 'del', name: '删除', icon: 'el-icon-delete', color: 'red'}
                ]
            }
          },
          emit: ['handleClick']
        }
        this.rule.push(tableJson)
      },
      makerComponent() {
        let componentJson = {
          type: 'custom-component',
          field: '',
          title: '自定义组件',
          value: '',
          props: {}
        }
        this.rule.push(componentJson)
      },
      makerButton() {
        let buttonJson = {
          type: 'ddd-button',
          field: 'button',
          title: '',
          value: '',
          props: {
            text: '按钮',
            type: 'primary',
            round: true
          },
          emit: ['handleClick'],
          col: {
            span: 5
          }
        }
        this.rule.push(buttonJson)
      },
      makerChart() {
        let chartJson = {
          type: 'ddd-chart',
          field: 'chart',
          title: '',
          value: '',
          props: {
            option: {
              title: {text: ''},
              tooltip: {},
              // xAxis: {
                // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
              // },
              // yAxis: {},
              series: [{
                type: 'pie',
                data: [
                  {name: "衬衫", value: 5},
                  {name: "羊毛衫", value: 20},
                  {name: "雪纺衫", value: 36},
                  {name: "裤子", value: 10},
                  {name: "高跟鞋", value: 10},
                  {name: "袜子", value: 20}
                  ]
              }]
            }
          }
        }
        this.rule.push(chartJson)
      },
      onJsonChange(value) {
        // console.log('value:', value)
      },
      remoteMethod() {
        console.log('ddd')
      },
      save() {
        if (this.formName === null || this.formName === '') {
          this.formNameVisible = true
        } else {
          this.sure()
        }

      },
      selectFocus(e) {
        let optionsValue = [
          {"value": "104", "label": "蔬菜", "disabled": false},
          {"value": "105", "label": "新鲜水果", "disabled": false},
        ]
        optionsValue.forEach(item => {
          this.fApi.getRule('select').options.push(item)
        })
        this.fApi.getRule('select').props.loading = false
      },
      cancel() {
        this.formNameVisible = false
        this.formName = ''
      },
      sure() {
        if (this.formName === null || this.formName === '') {
          this.$message.error('请输入表单模块名')
        } else {
          let jsonData = JSON.stringify(this.rule)
          generatorApi.formGenerator({formData: jsonData, formName: this.formName}).then(res => {
            this.formNameVisible = false
            this.forName = ''
            this.$message.success('保存成功')
          })
        }
      },
      tableHandleClick(data, type, index) {
        console.log(data)
        console.log(type)
        console.log(index)
      }
    },
    mounted() {
      Vue.component('custom-component', customComponent)
    }
  }
</script>

<style lang="scss" scoped>
  .leftPanel {
    height: 100%;
    width: 14%;
    float: left;
    border-right-style: dashed;
  }

  .midPanel {
    height: 100%;
    width: 54%;
    float: left;
    padding-left: 1%;
    padding-right: 1%;
  }

  .rightPanel {
    height: 100%;
    width: 32%;
    float: left;

    .jsoneditor-vue {
      height: 500px;
    }
  }

  .rightPanel div .jsoneditor-vue {
    height: 500px;
  }

  .el-col {
    margin-bottom: 15px
  }
</style>
